<template>
  <div class="teaching">
    <div class="coursesList">
      <el-switch class="showListControl" v-if="getUserIsAdmin" v-model="showAll" active-text="所有课程" inactive-text="我的课程"></el-switch>
      <!-- <el-button class="showListControl" v-if="getUserIsAdmin" @click="changeShowAll">{{showAll ? '显示我的课程' : '显示所有课程'}}</el-button> -->
      <el-row class="item-list">
        <el-col :xs="11" :sm="7" :md="7" :lg="5" :xl="5" v-for="(citem, cindex) in getShowCourses" :key="cindex"
          class="coursesContent hover_boxShadow_defaut_shadow" :class="{
            twoisLast: !((cindex + 1) % 2),
            treeisLast: !((cindex + 1) % 3),
            fourisLast: !((cindex + 1) % 4),
          }" @click.native="handelJumpRoute('Coursedetail', citem)">
          <div class="coursesImg">
            <img v-lazy="citem.iconPath" />
          </div>
          <div class="courseInfo">
            <div class="name">{{ citem.name | filterName }}</div>
            <div class="desc">简介：{{ citem.currDesc || "无" }}</div>
            <div class="desc">教师：{{ citem.tutorNameList || "无" }}</div>
            <div class="desc">
              设计：{{ citem.designerNameList || citem.mainDesignerUserName || "【设计师】" }}
            </div>
            <div class="desc">已选人数：{{ citem.choosedNum || 0 }}</div>
            <div class="time">
              上课时间：{{ citem.startTeachingTime || "无" | filterTime }} ~
              {{ citem.finishTeachingTime || "无" | filterTime }}
            </div>
          </div>
          <div class="outTobottom">
            <button class="buttonAcitve" @click.stop="handleOpenDialogSelectClass('Statistics', citem)">
              统计
            </button>
            <div class="buttonAcitve btnList" @click="openViewScore(citem)">

              批阅
            </div>
            <!-- <button
              class="buttonAcitve"
              @click.stop="handelJumpRoute('CoursedetailSetting', citem)"
            >
              配置
            </button> -->
            <button class="buttonAcitve" @click.stop="handleEndClass(citem)">
              结课
            </button>
          </div>
        </el-col>
      </el-row>
      <div class="nullData" v-if="!getShowCourses.length">暂无数据</div>
    </div>
    <endClassDialog :showDialog="showDialog" @handleClose="handleClose" :currItem="currItem"
      @handleEndCourse="handleEndCourse" />
    <!-- <SelectClass
      :isShow.sync="isShow"
      :routeName="routeName"
      :courseData="courseData"
    /> -->
  </div>
</template>

<script>
import { getCourselist, gencurr, getCurriculumlist } from "@/request/courses";
import { location, renderTimeToYMD, currTime, location_QuestionBank } from "@/util/tool";
import { mapState } from "vuex";
// import SelectClass from "@/components/selectClass/selectClass";
// import testVue from "../../user/test.vue";
const endClassDialog = () =>
  import("@/views/myCourses/teaching/component/endClassDialog");

export default {
  components: {
    // SelectClass,
    endClassDialog,
  },
  data() {
    return {
      coursesData: [],
      location: location(window),
      isShow: false,
      courseData: {},
      routeName: "",
      showDialog: false,
      currItem: {},
      showAll: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      myTeaching: (state) => state.courses.myTeaching,
      currCourses: (state) => state.courses.currCourses,
    }),
    getUserIsAdmin() {
        return this.userInfo.regName == '21003' || this.userInfo.regName == '10241' || this.userInfo.regName == '10075'
    },
    getShowCourses()  {
      return this.showAll? this.currCourses : this.myTeaching 
    }
  },
  filters: {
    filterName(value) {
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return renderTimeToYMD(time) + " " + currTime(time);
    },
  },
  async created() {
    await this.$store.dispatch("courses/fetchCoursesList");
  },
  methods: {
    // 路由跳转
    handelJumpRoute(routeName, item) {
      if (routeName == "Statistics") {
        return this.$router.push({
          name: routeName,
          params: {
            id: item.currNo,
          },
        });
      }
      this.$router.push({
        name: routeName,
        query: {
          currNo: item.currNo,
          courseID: item.courseID,
        },
        params: {
          id: item.currNo,
        },
      });
    },
    openViewScore(citem) {
      window.open(`${location_QuestionBank(window)}/study/${citem.currNo}`)
    },
    // 打开对话框
    handleOpenDialogSelectClass(routeName, item) {
      // if (item.classNameList?.indexOf(",") == -1 && !item.classIDList) {
      return this.handelJumpRoute(routeName, item);
      // }
      // this.isShow = true;
      // this.courseData = item;
      // this.routeName = routeName;
    },
    handleClose() {
      this.showDialog = false;
    },
    handleEndClass(item) {
      this.currItem = Object.assign(item);
      this.showDialog = true;
    },
    handleEndCourse(state) {
      this.$store.dispatch("courses/filterCoursesState", {changeToEnd: state, currNo: this.currItem.currNo})
      this.currItem.state = state;
      this.showDialog = false;
    },
    // 显示所有课程
    changeShowAll() {
      this.showAll = !this.showAll
    }
  },
};
</script>

<style lang="stylus" scoped>
.teaching {
  padding-top: 30px;
  margin: 0 auto;
  max-width: 1200px;

  .coursesList {
    position: relative;

    .showListControl {
      margin: 0 0 15px 0;
    }

    .nullData {
      font-size: 16px;
    }

    .item-list {
      display: flex;
      flex-flow: wrap;

      @media only screen and (min-width: 1200px) {
        .el-col-lg-5 {
          margin-right: calc(((1200px - (273px * 4)) / 3));
          margin-bottom: 25px;
        }

        .fourisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 1200px) and (min-width: 768px) {
        .el-col-md-7 {
          margin-right: calc((calc(100%) / 3 / 3 / 2));
          margin-bottom: 25px;
        }

        .coursesContent {
          max-width: 273px;

          .coursesImg {
            img {
              width: 100% !important;
            }
          }
        }

        .treeisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 767px) {
        .el-col-xs-11 {
          margin-right: calc((calc(100%) / 2 / 2 / 2 / 1.5));
          margin-bottom: 20px;
        }

        .twoisLast {
          margin-right: 0 !important;
        }
      }

      .coursesContent {
        padding: 11px 14px 0 15px;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;
        width: 270px;
        height: 420px;
        background-color: #ffffff;
        // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          line-height: 0;

          img {
            object-fit: cover;
            width: 244px;
            height: 156px;
            border-radius: 5px;
          }
        }

        .courseInfo {
          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .time {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
          }
        }

        .outTobottom {
          display: flex;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          width: 270px;
          height: 35px;
          // background-color: #ffc35f;
          border-radius: 0px 0px 7px 7px;
          transition: all 0.2s linear;
          text-align: center;
          line-height: 35px;
          font-family: Microsoft YaHei;
          font-size: 16px;
          color: #666;
          border-top: 1px solid #d3dae4;

          .followBtnBox {
            position: relative;
            flex: 1;
            height: 100%;
          }

          a {
            display: block;
            // line-height: 1;
          }

          button {
            cursor: pointer;
            flex: 1;
            padding: 0;
            position: relative;
            height: 100%;
            width: 100%;
            background: #fff;
            border: none;
            border-radius: 0;
            text-align: center;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #666666;
          }

          button:hover {
            background: #1c4e93;
            color: #fff;
          }

          .btnList {
            position: relative;
            flex: 1;

            .dropList {
              display: none;
              box-shadow: 0 0 1px 1px #d3dae4;

              background:button {
                flex: 1;
                // height: 34px;
                box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 16%);
              }
            }
          }

          .btnList:hover {
            background: #1c4e93;
            color: #fff;

            .dropList {
              position: absolute;
              top: -68px;
              display: flex;
              flex-flow: column;
              width: 100%;
              height: 68px;
            }
          }
        }
      }
    }
  }
}
</style>